<template>
  <div class="real-table">
    <div class="real-table-header">
      <icon-font icon-class="afl-liebiao"></icon-font>
      {{ rankList.title }}
    </div>
    <div class="real-table-list">
      <div class="rank-list">
        <div class="list-item">
          <div class="list-item-filed text-center table-title" style="  flex: 0 0 13%;">{{
              $t('wms.qtyOfBuckle')
            }}
          </div>
          <div class="list-item-filed text-center table-title" style="  flex: 0 0 13%;">{{
              $t('wms.outputQuantity')
            }}
          </div>
          <div class="list-item-filed text-center table-title" style="  flex: 0 0 20%;">{{
              $t('wms.materialCode')
            }}
          </div>
          <div class="list-item-filed text-center table-title" v-if="!showList" style="  flex: 0 0 30%;">{{
              $t('wms.materialSpce')
            }}
          </div>
          <div class="list-item-filed text-center table-title" v-else style="  flex: 0 0 30%;">{{
              $t('mes.trayNumber')
            }}
          </div>
          <div class="list-item-filed text-center table-title" style="  flex: 0 0 10%;">{{ $t('wms.unit') }}</div>
          <div class="list-item-filed text-center table-title" style="  flex: 0 0 14%;">{{
              $t('wms.reportingStatus')
            }}
          </div>
        </div>
        <div class="list-item content-item">
          <div class="list-item-filed" style=" flex: 0 0 13%;">
            <el-tag effect="plain" size="small" type="success">{{ rankList.data?.standardConsume || 0 }}</el-tag>
          </div>
          <div class="list-item-filed" style="flex: 0 0 13%;">
            <el-tag size="small" type="info">{{ rankList.data?.totalQty || 0 }}</el-tag>
          </div>
          <div class="list-item-filed" style="flex: 0 0 20%;">{{ rankList.data?.materialCode || '-' }}</div>
          <div class="list-item-filed" v-if="!showList" style="flex: 0 0 28%;">{{ rankList.data?.materialSpec || '-' }}</div>
          <div class="list-item-filed" v-else style="flex: 0 0 28%;">{{ rankList.data?.barcode || '-' }}</div>
          <div class="list-item-filed" style="flex: 0 0 10%;">{{ rankList.data?.unit || '-' }}</div>
          <div class="list-item-filed" style="flex: 0 0 16%;">{{ rankList.data?.reportStatus || '-' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import IconFont from '@/components/IconFont/iconFont'
import { timestampDataTime } from '@/utils/DateUtils'
import { onMounted, reactive, watch } from 'vue'

export default {
  name: 'realTimeTable',
  components: { IconFont },
  props: {
    rankList: { type: Object },
    showList: { type: Boolean }
  },
  setup (props) {
    // setup() 接收 props 作为第一个参数
    // console.log(props.rankList.data,'props.rankList.data')
  }
}
</script>

<style scoped lang="scss">
.real-table {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;

  &-header {
    height: 30px;
    color: #659f2c;
    font-size: 16px;
    line-height: 30px;
    padding: 0 0 0 20px;
    font-weight: bold;
    box-sizing: border-box;
    letter-spacing: 1px;
  }

  &-list {
    flex: 1;

    .text-center {
      text-align: center;
    }

    .table-title {
      color: #909399;
      font-weight: 500;
      font-size: 14px;
    }

    .rank-list {
      padding: 5px 10px 10px 10px;

      .list-item {
        display: flex;
        flex-direction: row;
        text-align: center;
        border-bottom: 2px dashed #eee;
        line-height: 25px;
        color: #909399;
        align-items: center;
        box-sizing: border-box;
        overflow: hidden;

        &-filed {
          box-sizing: border-box;
          overflow: hidden;
        }

        &:nth-child(1) {
          color: #303133;
        }

        &:nth-child(2) {
          color: #606266;
        }

        &:nth-child(3) {
          color: #909399;
        }

        &:nth-child(4) {
          color: #909399;

          .list-item-no {
            background: #C0C4CC;
          }
        }
      }

      .content-item {
        .list-item-filed {
          line-height: 40px;
        }
      }
    }
  }
}
</style>
